<template>
  <div>
    <!-- 优惠券模块 -->
    <div class="coupon-one">
      <van-nav-bar
        title="优惠券"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <!-- 宫格导航模块 -->
    <div class="coupon-tabs">
      <van-tabs>
        <!-- 通用 -->
        <van-tab title="通用优惠券">
          <div class="tab-div" v-for="item in coupontads" :key="item.id">
            <div class="tab-div-box">{{item.id}}</div>
            <div class="tab-div-min">
              <div>{{item.name}}</div>
              <div>{{item.tex_name}}</div>
            </div>
            <div class="tab-div-max">
              <button>使用</button>
            </div>
          </div>
        </van-tab>
        <!-- 店内 -->
        <van-tab title="店内优惠券">
          <div class="tab-div" v-for="item in coupontatle" :key="item.id">
            <div class="tab-div-box">{{item.price}}</div>
            <div class="tab-div-min">
              <div>{{item.name}}</div>
              <div>{{item.tex_name}}</div>
            </div>
            <div class="tab-div-max">
              <button>使用</button>
            </div>
          </div>
          <div class="tab-div" v-for="item in coupontatle" :key="item.id">
            <div class="tab-div-box">{{item.price}}</div>
            <div class="tab-div-min">
              <div>{{item.name}}</div>
              <div>{{item.tex_name}}</div>
            </div>
            <div class="tab-div-max">
              <button>使用</button>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 通用优惠券 -->
    <div class="coupon_one">
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Coupon',
  data () {
    return {
      coupontads: [
        {
          name: '优惠券',
          tex_name: '有效时间：2020.05.23 ---- 2020.12.31',
          id: '2￥'
        }
      ],
      coupontatle: [
        {
          name: '优惠券',
          tex_name: '有效时间：2020.05.23 ---- 2020.12.31',
          price: '10￥'
        }
      ]
    }
  },
  created () {
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style scoped lang="less">
  .coupon-one {
    .van-nav-bar {
      background-color: #f93e2e;
      /deep/.van-nav-bar__title {
        color: #fff;
      }
      /deep/.van-icon {
        color: #fff;
        font-size: 40px;
      }
    }
  }
  .coupon-tabs {
    .tab-div {
      width: 100%;
      height: 200px;
      margin: 10px 10px;
      position: relative;
      background: url(../../../assets/bjing.png) no-repeat;
      background-size: 100%;
      .tab-div-box {
        font-size: 45px;
        margin-left: 10px;
        line-height: 200px;
        color:#f93121;
      }
      .tab-div-min {
        position: absolute;
        top: 50px;
        left: 130px;
        font-size: 25px;
        text-align: center;
        div {
          margin: 5px 0;
        }
      }
      .tab-div-max {
        position: absolute;
        bottom: 30px;
        right: 30px;
        button {
          border: 1px solid;
          border-radius: 50px;
          font-size: 25px;
          width: 150px;
          height: 40px;
        }
      }
    }
  }
</style>
